<template>
  <a-card>
    <a-row>
      <a-col :lg="{ span: 5 }" :sm="24">
        <a-form-item label="街道" style="display: flex">
          <a-input
            placeholder="请输入名称"
            v-model="keyWord['areaPidName']"
          />
        </a-form-item>
      </a-col>
      <a-col :lg="{ span: 5,offset:1 }" :sm="24">
        <a-form-item label="社区" style="display: flex">
          <a-input
            placeholder="请输入名称"
            v-model="keyWord['areaSonName']"
          />
        </a-form-item>
      </a-col>
      <a-button type="primary" @click="onSearch()"> 搜索 </a-button>
    </a-row>

    <a-space class="operator">
      <a-button type="primary" v-on:click="add()">新建街道</a-button>
      <!-- <a-button >批量操作</a-button> -->
      <!-- <a-dropdown>
        <a-menu @click="handleMenuClick" slot="overlay">
          <a-menu-item
            v-on:click="batchDel()"
            :disabled="selectedRowKeys.length < 1"
          >
            <a-icon type="delete" />批量删除
          </a-menu-item>
          <a-menu-item
            v-on:click="batchStatus(1)"
            :disabled="selectedRowKeys.length < 1"
          >
            <a-icon type="check-circle" />批量启用
          </a-menu-item>
          <a-menu-item
            v-on:click="batchStatus(0)"
            :disabled="selectedRowKeys.length < 1"
          >
            <a-icon type="stop" />批量禁用
          </a-menu-item>
        </a-menu>
        <a-button> 批量操作 <a-icon type="down" /> </a-button>
      </a-dropdown> -->
    </a-space>

    <a-table
      style="margin-top: 30px"
      :columns="columns"
      :data-source="data"
      :loading="loading"
      :rowKey="(record) => record.id"
      :expanded-row-keys.sync="expandedRowKeys"
      :pagination="false"
    >
      <template slot="operation" slot-scope="text">
        <div class="operation">
          <a
            href="javascript:;"
            :disabled="text.pid != 0"
            v-on:click="addSon(text)"
            >添加社区</a
          >
            <a-popconfirm
            :title="`确定要${text.status ? '禁用' : '启用'}吗?`"
            @confirm="() => operate('status', text)"
          >
            <a href="javascript:;" v-show="text.status">禁用</a>
            <a href="javascript:;" v-show="!text.status">启用</a>
          </a-popconfirm>
          <a href="javascript:;" v-on:click="operate('edit', text)">编辑</a>
       


          <a-popconfirm
            :title="`确定要删除吗?`"
            @confirm="() => operateDel(text)"
          >
            <a href="javascript:;">删除</a>
          </a-popconfirm>
        </div>
      </template>
    </a-table>

    <div class="show-right">
      <a-pagination
        :current="page"
        :pageSize="pageSize"
        :total="total"
        :showSizeChanger="true"
        :showLessItems="true"
        :showQuickJumper="true"
        :pageSizeOptions="['10', '20', '50', '100', '500', ...total.toString()]"
        :scroll="{ x: 1300 }"
        :showTotal="
          (total, range) => `第 ${range[0]}-${range[1]} 条，总计 ${total} 条`
        "
        @change="onPageChange"
        @showSizeChange="onSizeChange"
        :loading="loading"
      >
        <template slot="buildOptionText" slot-scope="props">
          <span v-if="props.value == total">全部</span>
          <span v-else>{{ props.value }}条/页</span>
        </template>
      </a-pagination>
    </div>

    <!-- </div> -->
    <!-- <router-view> </router-view> -->
  </a-card>
</template>

<script>
// import StandardTable from "@/components/table/StandardTable";

const columns = [
  {
    title: "街道/社区",
    dataIndex: "name",
    key: "name",
  },
  {
    title: "区划代码",
    dataIndex: "zoningCode",
    key: "zoningCode",
    width: "20%",
  },
  {
    title: "创建时间",
    dataIndex: "create_time",
    key: "create_time",
    width: "20%",
  },
  {
    title: "排序",
    dataIndex: "sort",
    key: "sort",
    width: "12%",
  },
  {
    title: "操作",
    // dataIndex: 'operation',
    scopedSlots: { customRender: "operation" },
    width: "220px",
  },
];
import { areaList, areaEdit } from "@/services/area";

export default {
  name: "TeachingCulture",
  data() {
    return {
      data: [],
      columns,
      expandedRowKeys: [],
      keyWord: {
        "areaPidName": "",
        "areaSonName":"",
      },
      loading: false, //表格是否加载中
      page: 1, //第几页
      pageSize: 10, //一页多少条
      total: 0, //总共多少条
    };
  },
  authorize: {
    operate: "编辑",
    batchStatus: "编辑",
    add: "添加",
    addSon:"添加",
    operateDel: "删除",
    batchDel: "删除",
  },
  created() {
    // this.getColumns()
    this.tableLoad(); //表格查询
  },
  methods: {
    onSearch() {
      this.tableLoad();
    },
    onSizeChange(current, size) {
      this.page = 1;
      this.pageSize = size;
      this.tableLoad();
    },
    onPageChange(page, pageSize) {
      this.page = page;
      this.pageSize = pageSize;
      this.tableLoad();
    },
    add() {
      this.$router.push("/findShop/areaAdd");
    },
    async tableLoad() {
      this.loading = true
      let sourceData = await areaList({ page: this.page, limit: this.limit,keyWord:this.keyWord });
      const { list, total } = sourceData.data;
      this.data  = list
      this.total = total
      this.loading = false
    },
    async operate(key, data, top = false) {
      const { sysTime, $message, tableLoad } = this;
      switch (
        key //置顶操作
      ) {
        // case "onTop":
        //   $message.loading({ content: "修改中", key: "loading" });
        //   let res = await adminEdit({
        //     formData: { top_time: data.top_time && !top ? null : sysTime() },
        //     id: data.id,
        //   });
        //   if (res.code == 200) {
        //     $message.success({
        //       content: "修改成功",
        //       key: "loading",
        //       duration: 2,
        //     });
        //     tableLoad();
        //   }

        //   break;
        case "status":
          $message.loading({ content: "修改中", key: "loading" });
          let adminRes = await areaEdit({
            formData: { status: data.status ? 0 : 1 },
            conditions: { id: data.id },
          });
          if (adminRes.code == 200) {
            $message.success({
              content: "修改成功",
              key: "loading",
              duration: 2,
            });
            tableLoad();
          }
          break;
        case "edit":
          this.$router.push({
            path: "/findShop/areaEdit",
            query: { area_id : data.id },
          });

          break;
      }
    },
    async operateDel(data) {
      const { sysTime, $message, tableLoad } = this;
      $message.loading({ content: "删除中", key: "loading" });
      let res = await areaEdit({
        formData: { delete_time: sysTime() },
        conditions: { id: data.id },
      });
      if (res.code == 200) {
        $message.success({
          content: "删除成功",
          key: "loading",
          duration: 2,
        });
        tableLoad();
      }
    },
    addSon(text) {
      let pid = text.id;
      this.$router.push({
        path: "/findShop/areaAdd",
        query: { pid: pid , name: text.name },
      });
    },
    batchStatus(status) {
      const { $message, tableLoad, $confirm, selectedRowKeys } = this;
      let text = status ? "启用" : "禁用";
      $confirm({
        title: "确定要" + text + "吗?",
        async onOk() {
          $message.loading({ content: text + "中", key: "loading" });
          let res = await adminEdit({
            formData: { status: status },
            id: selectedRowKeys,
          });
          if (res.code == 200) {
            $message.success({
              content: text + "成功",
              key: "loading",
              duration: 2,
            });
            tableLoad();
          }
        },
      });
    },
    // async batchDel() {
    //   const { sysTime, $message, tableLoad } = this;
    //   $message.loading({ content: "删除中", key: "loading" });
    //   let res = await teachingUpdate({
    //     formData: { delete_time: sysTime() },
    //     id: this.selectedRowKeys,
    //   });
    //   if (res.code == 200) {
    //     $message.success({
    //       content: "删除成功",
    //       key: "loading",
    //       duration: 2,
    //     });
    //     tableLoad();
    //   }
    // },
  },
};
</script>

<style lang="less" scoped>
.table-adv {
  max-width: 100%;
  // border: 1px solid blue;
  overflow: auto;
  white-space: nowrap;
}

.show-right {
  float: right;
  margin-top: 10px;
}
.operation {
  display: flex;
  justify-content: space-between;
}
.over-one {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
</style>
